<template>
  <div class="config_info" style="text-align: center;">
    <div class="excel_table"   v-if="excelData.length>0">
      <el-table :data="excelData" border height="auto" style=" margin: 30px 5px;">
        <el-table-column v-for='(item,i) in firstData' :key="i" :label="item" show-overflow-tooltip :header-cell-style="rowClass">
          <template slot-scope="scope">
            <el-input size="small" :disabled="true" v-model="scope.row[i]" />
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: left;">
        <el-button  type="primary" v-for="(item,index) in sheetNames"
                    :key="index"
                    :class="item"
                    @click="selected(item)">{{item}}
        </el-button>
      </div>
    </div>
    <div class="ini_table" style="margin-top: 30px;" v-if="iniText.length>0">
      <el-col >
        <textarea class="textarea-mine" v-model="iniText"  id="ini_table"></textarea>
      </el-col>
    </div>
    <div class="properties_table" style="margin-top: 30px; "  v-if="propertiesText.length>0">
      <el-col >
        <textarea class="textarea-mine" v-model="propertiesText"  id="properties_table"></textarea>
      </el-col>
    </div>
  </div>
</template>

<script>
export default {
  name: 'excelShow',
  data: function () {
    return {
      excelData: [
        ['设计工程师', '文件管理', '心法技术文件', 'C919xxxxxx'],
        ['设计工程师', '文件管理', '心法技术文件', 'C919xxxxxx'],
        ['设计工程师', '文件管理', '心法技术文件', 'C919xxxxxx'],
        ['设计工程师', '文件管理', '心法技术文件', 'C919xxxxxx'],
        ['设计工程师', '文件管理', '心法技术文件', 'C919xxxxxx'],
        ['设计工程师', '文件管理', '心法技术文件', 'C919xxxxxx'],
        ['设计工程师', '文件管理', '心法技术文件', 'C919xxxxxx']
      ],
      firstData: ['角色名', '一级操作菜单', '二级操作菜单', '菜单链接'],
      sheetNames: ['C919', 'ARJ21', 'CXF'],
      iniText: '',
      // iniText: '5.小合作要放下态度，彼此尊重；大合作要放下利益，彼此平衡；一辈子的合作要放下性格，彼此成就。一味索取，不懂付出，或一味任性，不知让步，到最后必然输得精光。——共同成长，才是生存之道。工作如此，婚姻如此，友谊如此，事业亦如此！\n' +
      //   '\n' +
      //   '6.和谁都别熟的太快，不要以为刚开始话题一致，共同点很多，你们就是相见恨晚的知音。语言很多时候都是假的，一起经历的才是真的。\n' +
      //   '\n' +
      //   '7.人就是靠着不断的遗忘，才比较容易活得下去。一念之差，心的格局便不一样，可以大如宇宙，也可以细如微尘。\n' +
      //   '\n' +
      //   '8..人生没有如果，只有后果和结果。过去不会再回来，即使回来也不再完美。生活有进退，输什么也不能输心情。\n' +
      //   '\n' +
      //   '9.落叶才知秋，落难才知友。真正的朋友是千帆过尽，留下的守候；真正的感情是历经风雨，验证的情意。陪在身边最久的，才是最爱你的人；握在手里最长的，才是最疼你的心！',
      propertiesText: []
      // propertiesText: '5.小合作要放下态度，彼此尊重；大合作要放下利益，彼此平衡；一辈子的合作要放下性格，彼此成就。一味索取，不懂付出，或一味任性，不知让步，到最后必然输得精光。——共同成长，才是生存之道。工作如此，婚姻如此，友谊如此，事业亦如此！\n' +
      //   '\n' +
      //   '6.和谁都别熟的太快，不要以为刚开始话题一致，共同点很多，你们就是相见恨晚的知音。语言很多时候都是假的，一起经历的才是真的。\n' +
      //   '\n' +
      //   '7.人就是靠着不断的遗忘，才比较容易活得下去。一念之差，心的格局便不一样，可以大如宇宙，也可以细如微尘。\n' +
      //   '\n' +
      //   '8..人生没有如果，只有后果和结果。过去不会再回来，即使回来也不再完美。生活有进退，输什么也不能输心情。\n' +
      //   '\n' +
      //   '9.落叶才知秋，落难才知友。真正的朋友是千帆过尽，留下的守候；真正的感情是历经风雨，验证的情意。陪在身边最久的，才是最爱你的人；握在手里最长的，才是最疼你的心！'
    }
  },
  methods: {
    selected (index) {
      alert('查询' + index + '页')
    }
  }
}
</script>

<style>
.textarea-mine {
  border: #0c0c0c;
  height: 80vh;
  padding: 5px;
  width: 100%;
  display: block;
  flex: 1;
  margin: 10px 5px;
  font-size: 15px;
  color: #0c0c0c;
  overflow-y: auto;
  appearance: none;
  font-family: -apple-system-font, "Helvetica Neue", sans-serif, "Microsoft YaHei";
}
.config_info{
  text-align: center;
  background-color: #fff;
  border-radius: 20px;
  width: 80%;
  height: 350px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

}

</style>
